<!--
 * @Description: 简单封装echart
 * @Autor: zhangzhanhua
 * @Date: 2021-07-17 09:02:01
 * @LastEditors: zhangzhanhua
 * @LastEditTime: 2021-07-19 09:03:52
-->
<template>
    <div :id="id" style="width:100%;height:100%"></div>
</template>

<script>
import echarts from "echarts";
export default {
    data() {
        return {
            szhCharts: null,
            id: ''
        }
    },
    watch: {
        options: {
            handler(newVal, oldVal) {
                this.$nextTick(() => {
                    this.draw();
                });
            },
            deep: true //对象内部属性的监听，关键。
        },
    },
    props: {
        options: Object,
    },

    methods: {
        draw() {
            let chartDom = document.getElementById(this.id)
            console.log(chartDom);
            this.szhCharts = echarts.init(chartDom);
            this.szhCharts.resize();
            this.options && this.szhCharts.setOption(this.options);
            window.addEventListener("resize", this.resizeFun, false)
        },

        resizeFun() {
            this.szhCharts.resize();
        },
        uuid() {
            var s = [];
            var hexDigits = "0123456789abcdef";
            for (var i = 0; i < 36; i++) {
                s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
            }
            s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
            s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
            s[8] = s[13] = s[18] = s[23] = "-";

            var uuid = s.join("");
            return uuid;
        }
    },
    activated() {
        this.id = this.uuid()
        console.log(this.id);
        this.$nextTick(() => {
            this.draw();
        });
    },
    deactivated() {
        window.removeEventListener("resize", this.resizeFun, false);
    }
}
</script>